<template>
  <div ref="boxRef" class="h-full w-full overflow-hidden flex flex-col">
    <a-result class="m-auto" status="success">
      <template #icon>
        <div class="h-full w-full p-2">
          <Icon icon="game-icons:abstract-036" class="h-full w-full" :style="followStyle" />
        </div>
      </template>
      <template #title>
        <span :style="longStyle">This is title content</span>
      </template>
      <template #subtitle>
        <span :style="longAndFollowStyle">This is subtitle content</span>
      </template>
      <template #extra>
        <a-space>
          <a-button type="primary" :style="style">This is button</a-button>
        </a-space>
      </template>
    </a-result>
  </div>
</template>

<script lang="ts" setup>
const boxRef = ref()
const { createStyle, left, top } = useMoveByMouse(boxRef)

const style = createStyle()
const followStyle = createStyle({ follow: true })
const longStyle = createStyle({ distance: 300 })
const longAndFollowStyle = createStyle({ follow: true, distance: 100 })
</script>
